<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>韩召-菲拉格慕首页</title>
    <link rel="stylesheet" href="./download/font_1993787_1ati6nwh5d5/iconfont.css">
    <link rel="stylesheet" href="style/flgmHome.css">
    <script src="js/jquery.min.js"></script>
    <script src="./js/flgmHome.js"></script>
</head>
<body>
    <div id="boximg">
        <i class="iconfont icon-youjiantou left"></i>
        <i class="iconfont icon-zuojiantou right"></i>
        <ul>
            <li><img src="./img/bj1.jpg" alt=""></li>
            <li><img src="./img/bj2.jpg" alt=""></li>
        </ul>
    </div>
       <!-- 导航 -->
    <div id="nav">
        <h1><img src="./img/logo-header.svg" alt=""></h1>
        <ul>
            <li>新品</li>
            <li>女士</li>
            <li>男士</li>
            <li>礼品</li>
        </ul>
        <div class="nav-r">
            <span class="logIn">登录</span>
            <span class="enroll">注册</span>
            <span>心愿单</span>
            </div>
        <div class="action">
            <a href="http://127.0.0.1:777/flgmShop.html">购物袋</a>
            <span class="iconfont icon-fangdajing"></span>
        </div>
    </div>
    <!-- 鼠标移上商品分类 -->
    <div id="classify">
        <!-- 新品 -->
        <div class="show newon">
            <div class="new-l">
                <ul>
                    <li><h3>女士</h3></li>
                    <li>新品系列</li>
                    <li>Viva手袋new！</li>
                    <li>印花的魔力</li>
                    <li>VivaViva</li>
                    <li><h3>男士</h3></li>
                    <li>新品系列</li>
                </ul> 
            </div>
           
            <div class="new-r">
                <img src="./img/file.png" alt="">
            </div>
        </div>
        <!-- 女士 -->
        <div class="show lady">
            <ul>
                <li><h3>鞋履</h3></li>
                <li>Viva</li>
                <li>Vara</li>
                <li><a href="http://127.0.0.1:777/flgmList.html" target="blank">高跟鞋</a></li>
                <li>芭蕾舞鞋及平底鞋</li>
                <li>穆勒鞋及拖鞋</li>
                <li>莫卡辛鞋及驾车鞋</li>
                <li>凉鞋及渔夫鞋</li>
                <li>运动鞋及便鞋</li>
                <li>短靴及长靴</li>
            </ul>
        </div>
        <!-- 男士 -->
        <div class="show sir">
            <ul>
                <li><h3>鞋履</h3></li>
                <li><a href="http://127.0.0.1:777/flgmList.html" target="blank"">Tramezza系列</a></li>
                <li>莫卡辛鞋及驾车鞋</li>
                <li>驾车鞋</li>
                <li>牛津鞋及孟克鞋</a></li>
                <li>运动鞋及便鞋</li>
                <li>凉鞋及渔夫鞋</li>
            </ul>
        </div>
        <!-- 礼品 -->
        <div class="show gift">
            <ul>
                <li><h3>女士礼品</h3></li>
                <li><h3>男士礼品</h3></li>
            </ul>
        </div>
    </div>
    <!-- 新品上市 -->
    <div id="newArrival">
        <div>
            <img src="./img/n1.jpg" alt="">
            <div class="mask"></div>
            <div class="hint">
                <h2>新品上市</h2>
                <p>购买女士</p>
            </div>
        </div>
        <div>
            <img src="./img/n2.jpg" alt="">
            <div class="mask"></div>
            <div class="hint">
                <h2>新品上市</h2>
                <p>购买男士</p>
            </div>
        </div>
    </div>

    <!-- 女士鞋履 -->
    <div id="shoes">
        <div class="shoes-l">
            <img src="./img/shoes1.jpg" alt="">
            <div class="mask"></div>
            <div class="hint">
                <h2>女士鞋履</h2>
                <p>购买</p>
            </div>
        </div>
        <div class="shoes-r">
            <span class="iconfont icon-youjiantou"></span>
            <span class="iconfont icon-zuojiantou"></span>
            <div class="shoes-enter">
                <ul class="circle">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <ul class="picture">
                    <li class="pictureList">
                        <img src="./img/shoes6.jpg" alt="">
                        <h5>VAVA露跟鞋</h5>
                        <p>￥5500</p>
                    </li>
                    <li>
                        <img src="./img/shoes3.jpg" alt="">
                    </li>
                    <li>
                        <img src="./img/shoes4.jpg" alt="">
                    </li>
                    <li>
                        <img src="./img/shoes5.jpg" alt="">
                    </li>
                    <li>
                        <img src="./img/shoes2.jpg" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 男士鞋履 -->
    <div id="shoed">
        <img src="./img/shoed.jpg" alt="">
        <div class="mask"></div>
        <div class="hint">
            <h2>男士鞋履</h2>
            <p>购买</p>
        </div>
    </div>

    <!-- 其他故事 -->
    <h2 id="story">其他故事</h2>
    <div id="explore">
        <div>
            <img src="./img/s1.jpg" alt="">
            <div class="hint">
                <h2>印花的魔力</h2>
                <p>探索更多</p>
            </div>
        </div>
        <div>
            <img src="./img/s2.jpg" alt="">
            <div class="hint">
                <h2>VIVAVIVAV</h2>
                <p>探索更多</p>
            </div>
        </div>
    </div>


    <!-- 底部 -->
    <div id="footer">
        <div class="footer-top">
            <ul>
                <li><h3>需要帮助？</h3></li>
                <li>联系我们</li>
                <li>常见问题</li>
                <li>购买和退货</li>
                <li>支付方式</li>
            </ul>
            <ul>
                <li><h3>关于公司</h3></li>
                <li>博物馆</li>
                <li>公司可持续发展的责任</li>
                <li>职业发展/人力资源</li>
                <li>法律声明</li>
                <li>细则及条款</li>
                <li>隐私及COOKIE</li>
                <li>投资者信息</li>
            </ul>
            <ul>
                <li><h3>关注我们</h3></li>
                <li>微信</li>
                <li>微博</li>
                <li>抖音</li>
                <li>微信视频号</li>
                <li>小红书</li>
            </ul>
            <div class="footer-top-r">
                <div>
                    <ul>
                        <li><h3>电子资讯</h3></li>
                        <li>我感兴趣的是：</li>
                        <li><input type="radio" name="a">女士<input type="radio"name="a"   class="intes">男士</li>
                        <li>
                            <input type="text" placeholder="邮箱地址" id="" style="outline: none; border: none; width: 233px;height: 40px;float: left;" >
                            <button style="width: 110px;height: 40px;float: left;border: 1px solid #ccc;">订阅</button>
                        </li>
                    </ul>
                </div>
                <div class="find">
                    <h3>查询精品店</h3>
                    <input type="text" placeholder="输入城市,进行查找" id="" style="outline: none;      border: none; width: 233px;height: 40px;float: left;" >
                    <button style="width: 110px;height: 40px;float: left;border: 1px solid #ccc;">搜索</button>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <span>2020© Salvatore Ferragamo S.P.A.P.IVA 02175200480沪ICP备16045653号<img src="./img/p.png" alt="">
                沪公网安备 31010602001904
              </span>
        </div>
    </div>


    <!-- 注册 -->
    <div id="shade">
        <div id="enter">
            <i>关闭</i>
            <h1>注册</h1>
            <div class="login">
                <p>感谢您注册菲拉格慕账号</p>
                <div class="radio">
                    <input type="radio" name="s">女士
                    <input type="radio" name="s">男士
                </div>
                <div class="set">
                    <input type="text" placeholder="手机号码*" id="tel">
                    <input type="text" placeholder="图形验证码*">
                    <input type="text" placeholder="手机验证码*">
                    <input type="password" placeholder="设置密码*" id="pwd">
                    <input type="password" placeholder="确认密码*" id="pwdq">
                    <input type="text" placeholder="您的姓名*" id="name">
                    <input type="email " placeholder="电子邮箱*" id="email">
                    <div class="sub">
                        <input type="checkbox"><span>订阅关于菲拉格慕产品、服务和活动的邮件</span>
                    </div>
                    <div class="sub">
                       <input type="checkbox"><span>您已阅读并接受菲拉格慕销售条款和隐私条款
                            </span>
                    </div>
                    <div class="back">
                        <button>注册</button>
                        <button>返回登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录 -->
   <div id="blot">
       <div class="loginId">
           <i>关闭</i>
           <div class="info">
                <div class="verify-1">
                    <span>登录</span>
                    <span>手机号验证码登录</span>
                </div>
                <div class="verify-2">欢迎回来，请输入您的登录信息</div>
                <input type="text" id="phone" placeholder="手机号码*">
                <input type="text" id="pass" placeholder="密码*">
                <div class="psw">
                    <div><input type="checkbox">记住密码<span>忘记密码</span></div>
                </div>
                <button>登录</button>
                <button>返回注册</button>
           </div>
       </div>
   </div>
    

</body>
</html>




